<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in gallery" :key="index">
        <img :src="item.img_url" width="100%" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 退换货时间 -->
    <ppd></ppd>

    <!-- 文案 -->
    <div class="info">
      <div class="title">{{ info.name }}</div>
      <div class="desc">{{ info.goods_brief }}</div>
      <div class="price">{{ Number(info.retail_price).toFixed(2) }}</div>
    </div>
    <van-cell is-link style="height: 40px; line-height: 40px" @click="showPopup"
      >展示弹出层</van-cell
    >
    <!-- //弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '35%' }"
      style="z-index: 10000"
    >
      <div class="goodLan">
        <div class="goodLan_top">
          <div class="goodlan_l">
            <img :src="info.list_pic_url" alt="" width="100px" />
          </div>
          <div class="goodlan_r">
            <div class="goodlan_r_top">
              价格:{{ Number(info.retail_price).toFixed(2) }}元
            </div>
            <div class="goodlan_r_bommot">库存:{{ info.goods_number }}</div>
          </div>
        </div>
        <div class="goodlan_num">数量:</div>
        <van-stepper v-model="value" />
      </div>
    </van-popup>

    <!-- 参数 -->
    <div class="canshu">
      <div class="title">商品参数</div>
      <div class="ul">
        <div class="li" v-for="(item, index) in attribute" :key="index">
          <div class="left">{{ item.name }}</div>
          <div class="right">{{ item.value }}</div>
        </div>
      </div>
    </div>

    <!-- 图片 -->
    <div v-html="info.goods_desc"></div>

    <van-divider class="title">常见问题</van-divider>

    <div class="issue">
      <div class="ul">
        <div class="li" v-for="item in issue" :key="item.id">
          <div class="question">{{ item.question }}</div>
          <div class="answer">{{ item.answer }}</div>
        </div>
      </div>
    </div>

    <van-divider class="title">相关产品</van-divider>
    <Goods :goodsList="goodsList" @addN="addN"></Goods>

    <van-goods-action style="z-index: 99999999">
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsCount" />
      <van-goods-action-icon
        icon="star"
        :text="star ? '已收藏' : '收藏'"
        :color="star ? '#ff5000' : '#ccc'"
        @click="star = !star"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="showPopup"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { GetDetail, GetRelated, GetGoodscount,GetCartAdd } from "../request/api";
import ppd from "../components/ppd.vue";
import Goods from "../components/Goods.vue";
export default {
  components: {
    ppd,
    Goods,
  },
  data() {
    return {
      value: 1,
      star: false,
      id: 0,
      //轮播图
      gallery: [],
      //文本
      info: [],
      show: false,
      //参数
      attribute: [],
      issue: [],
      goodsList: [],
      //购物车数量
      goodsCount: "",
      productList:[]
    };
  },
  created() {
    let id = this.$route.query.id;
    this.newDetails(id);
  },
  methods: {
    showPopup() {
    //   this.show = !this.show;
        if(this.show==false){
            this.show = !this.show;
        }else{
            GetCartAdd({
                goodsId:this.productList[0].goods_id,
                productId:this.productList[0].id,
                number:this.value
            }).then(res=>{
                // console.log(res);
                Toast.success('成功加入购物车');
                this.show=false;
                this.value=1;
            })
            
        }
    },
    newDetails(id) {
      this.id = id;
      GetDetail({
        id: id,
      }).then((res) => {
        console.log("12111", res.data);
        if (!res.errno == 0) return;
        res.data.info.goods_desc = res.data.info.goods_desc
          .replace(/<img/g, '<img style="width:100%;display:block;"')
          .replace(/<p/g, '<p style="margin:0;padding:0;"');
        //   console.log(res.data.info.goods_desc);
        this.gallery = res.data.gallery;
        this.info = res.data.info;
        this.attribute = res.data.attribute;
        this.issue = res.data.issue;
        this.productList = res.data.productList;
      });

      GetRelated({ id: id }).then((res) => {
        console.log(res.data);
        if (!res.errno == 0) return; //goodsList
        this.goodsList = res.data.goodsList;
      });

      GetGoodscount().then((res) => {
        console.log(res.data); //goodsCount
        this.goodsCount = res.data.cartTotal.goodsCount;
      });
    },
    addN(id) {
      this.newDetails(id);
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  },
};
</script>
 
<style lang = "less" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
}
.info {
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  .title {
    font-size: 20px;
  }
  .desc {
    font-size: 14px;
    margin: 10px 0;
    color: #666;
  }
  .price {
    font-size: 14px;
    margin: 10px 0;
    color: rgb(110, 25, 25);
  }
}
.canshu {
  background-color: #fff;
  margin-top: 20px;
  padding: 10px 5px;
  .title {
    font-size: 17px;
    margin-bottom: 10px;
  }
  .ul {
    .li {
      display: flex;
      justify-content: space-between;
      height: 40px;
      border-radius: 5px;
      line-height: 40px;
      background-color: #ccc;
      margin-bottom: 7px;
      font-size: 14px;
      .left {
        color: #666;
        width: 25%;
        text-align: right;
        margin: 0 10px 0 0;
      }
      .right {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.issue {
  background-color: #fff;
  padding: 0 0 10px;
  margin: 0 0 10px;
  .ul {
    margin: 0 15px;
    .li {
      .question {
        font-size: 18px;
        line-height: 30px;
        position: relative;
        &::before {
          /* // 伪元素不能用js操控 */
          content: "";
          width: 5px;
          height: 5px;
          background: darkred;
          border-radius: 50%;
          position: absolute;
          left: -10px;
          top: 50%;
          margin-top: -3px;
        }
      }
      .answer {
        font-size: 14px;
        color: #999;
      }
    }
  }
}

.goodLan {
  padding: 10px;
  box-sizing: border-box;
  .goodLan_top {
    display: flex;
    .goodlan_r {
      .goodlan_r_top {
        margin: 10px 0 20px 10px;
      }
      .goodlan_r_bommot {
        margin: 10px 0 20px 10px;
      }
    }
  }
  .goodlan_num {
    margin: 10px;
    font-size: 20px;
  }
}
</style>